<template>
  <div class="register">
    <van-nav-bar
      class="navBar-parts"
      title="注册页面"
    >
       <div slot="left" class="returnUpper" @click="$router.go(-1)">
        <van-icon name="arrow-left" color="#fff"/>
        <span class="returnBtn">返回</span>
       </div>
    </van-nav-bar>
    <van-form @submit="onSubmit" ref="loginForm">
      <van-field
        required
        v-model="user.mobile"
        type="number"
        name="mobile"
        label="设置账号名"
        placeholder="手机号码"
        :rules="registerUser.mobile"
      />
      <van-field
        v-model="user.code"
        name="code"
        label="验证码"
        placeholder="请填写你的验证码"
        :rules="registerUser.code"
      >
      <template #button>
        <van-button 
        plain 
        color="#ed3651" 
        size="small" 
        v-if="isCountDown" 
        >
          <van-count-down class="countdownIcon" :time="time"  format="ss s" @finish="isCountDown = false"/>
        </van-button>
        
        <van-button plain color="#ed3651" size="small" @click="onUserProve" v-else>发送验证码</van-button>
      </template>
     </van-field>
      <div style="margin: 16px;">
        <van-button 
        round 
        block 
        type="info" 
        native-type="submit" 
        color="#ed3651"
        >
        提交
      </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { postUserSignIn, getUserMobile} from '@/service/getDate'
export default {
   name: 'regiSterPage',
   data() {
      return {
       user: {
        mobile: '',
        code: '',
       },
       time: 30 * 1000,
       isCountDown: false,
       registerUser: {
        mobile: [
          {
            required: true,
            message: '请输入您的手机号码'
          },
          {
            pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
            message: '请输入正确的手机格式'
          }
        ],
        code: [
          {
            required: true,
           
          },
          {
            pattern: /^\d{6}$/,
            message: '请输入正确的验证码格式'
          }
        ]
       }
      };
    },
    methods: {
     async onSubmit() {
      // 登录时显示登录中
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true,
        duration: 0, // 加载时间
      })
        try {
          const {data} = await postUserSignIn(this.user)
          this.$toast.success('注册成功')
          this.$store.commit('TOKEN_KEY', data.data)
          this.$router.push('/')
        } catch(err){
          if(err.response.status == 400) {
          this.$toast.fail('登录失败，请检查账号或密码是否正确')
          } else {
            this.$toast.fail('登录失败')
          }
        }
      },
     async onUserProve() {
        // 校验手机号码  如果手机号码输入框校验错误 则返回验证错误信息
        try {
          await this.$refs.loginForm.validateField('mobile')
        } catch(err) {
          return this.$toast.fail('验证失败')
        }
        this.isCountDown = true
        try {
          // 由于验证码是发送到手机中去，所以不用新增变量接数据
          await getUserMobile(this.user.mobile)
          this.$toast.success('发送成功')
        } catch(err) {
          this.isCountDown = false
          if(err.response.status == 404) {
            this.$toast.fail('手机号码不正确')
          } else if(err.response.status == 429) {
            this.$toast.fail('系统繁忙,请稍后重试')
          }
        }
      }
    },
}
</script>

<style lang="scss" scoped>
 .register {
  .navBar-parts {
    .returnUpper {
      color: #fff;
      font-size: 30px;
    }
  }
  .countdownIcon {
    color: #ed3651;
  }
 }
</style>